import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, Card } from 'antd';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login } from '../../actions/user'
import './login.less'
import { Fragment } from 'react';
const mapState = state => ({
    isLogin: state.user.isLogin,
    isLoading: state.user.isLoading
})

@connect(mapState, { login })
@Form.create()
className Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log(values)
            if (!err) {
                this.props.login(values)
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Fragment>
                <div className='login'>
                    <div className='login_title'>
                        <span>管理员登录</span>
                    </div>
                    <div className='login_fields'>
                        <div className='login_fields__user'>
                            <div className='icon'>
                                <img alt="" src='img/user_icon_copy.png'>
	      </div>
                                <input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
                                <div className='validation'>
                                    <img alt="" src='img/tick.png'>
	        </div>
                                </div>
                                <div className='login_fields__password'>
                                    <div className='icon'>
                                        <img alt="" src='img/lock_icon_copy.png'>
	      </div>
                                        <input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
                                            <div className='validation'>
                                                <img alt="" src='img/tick.png'>
	      </div>
                                            </div>
                                            <div className='login_fields__password'>
                                                <div className='icon'>
                                                    <img alt="" src='img/key.png'>
	      </div>
                                                    <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
                                                        <div className='validation' style="opacity: 1; right: -5px;top: -3px;">
                                                            <canvas className="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                                                        </div>
	    </div>
                                                    <div className='login_fields__submit'>
                                                        <input type='button' value='登录'>
	    </div>
                                                    </div>
                                                    <div className='success'>
                                                    </div>
                                                    <div className='disclaimer'>
                                                        <p>欢迎登陆后台管理系统</p>
                                                    </div>
                                                </div>
                                                <div className='authent'>
                                                    <div className="loader" style="height: 44px;width: 44px;margin-left: 28px;">
                                                        <div className="loader-inner ball-clip-rotate-multiple">
                                                            <div></div>
                                                            <div></div>
                                                            <div></div>
                                                        </div>
                                                    </div>
                                                    <p>认证中...</p>
                                                </div>
                                                <div className="OverWindows"></div>
            </Fragment>
        )
    }
}

export default Login